<template>
  <ych-modal
      :fullscreen="false"
      :title="title"
      :visible="visible"
      :destroyOnClose="true"
      class="vxe-table--ignore-clear"
      @cancel="handleCancel">

    <a-tabs size="small" v-if="groupId">
      <a-tab-pane :tab="$t('m.eform.appgroup.other.current_app')" :key="comp[0]">
        <locale-select-list :group-id="groupId" :currentTable="currentTable" @selected="selected"></locale-select-list>
      </a-tab-pane>
      <a-tab-pane :tab="$t('m.eform.appgroup.other.common_app')" :key="comp[1]">
        <locale-select-common-list :current-group-id="groupId" @selected="selected"></locale-select-common-list>
      </a-tab-pane>
    </a-tabs>
    <locale-select-system-list v-else @selected="selected"></locale-select-system-list>
    <template slot="footer">
      <a-button key="back" @click="handleCancel">{{ $t('m.common.button.close') }}</a-button>
    </template>
  </ych-modal>
</template>

<script>

import LocaleSelectList from './LocaleSelectList'
import LocaleSelectCommonList from './LocaleSelectCommonList'
import LocaleSelectSystemList from './LocaleSelectSystemList'

export default {
  name: 'LocaleSelectDialog',
  components: {
    LocaleSelectList,
    LocaleSelectCommonList,
    LocaleSelectSystemList,
  },
  props: {
    groupId: String,
    currentTable: String,
  },
  data() {
    return {
      title: this.$t('m.eform.localeProvider.label.select_title'),
      visible: false,
      comp: ['comp', 'compCommon'],
    }
  },
  methods: {
    handleCancel() {
      this.visible = false
    },
    selected(value) {
      this.$emit('selected', value)
      this.handleCancel()
    },
  }
}
</script>
